<template>
  <div style="margin-top: 240px; margin-left: 420px">
    <el-row :gutter="20">
      <el-col :span="2" :offset="0">
        <img src="@/assets/powerLogo.png" width="125" height="125" />
      </el-col>
      <el-col :span="6" :offset="1">
        <el-form :model="form" ref="loginform" :rules="rules" label-width="80px" :inline="false" >
          <el-form-item label="登录名称" prop="loginName">
            <el-input v-model="form.loginName"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="loginPwd">
            <el-input v-model="form.loginPwd" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-space :size="60">
              <el-button type="success" round @click="onLogin(loginform)" style="margin-left: 40px"
              >登录</el-button
              >
              <el-button type="warning" round @click="onReset">重置</el-button>
            </el-space>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
let loginform = ref()//声明普通的一个值基本类型变量
const form = reactive({
  loginName: '',
  loginPwd: '',
})

//验证规则
const rules = reactive({
  loginName: [
    { required: true, message: '请求输入登录名称', trigger: 'blur' },
    { min: 5, max: 50, message: '登录名称长度在5-50个字符', trigger: 'blur' }
  ],
  loginPassword: [
    { required: true, message: '请求输入登录密码', trigger: 'blur' },
    { min: 6, max: 50, message: '登录名称密码在6-50个字符', trigger: 'blur' }
  ]
})

//登陆函数
const onLogin = async (refFrom) => {
  if (!refFrom) {
    return
  }else {
    //验证loginfrom
    await refFrom.validate(valid=>{
      if(valid) {
        alert('可以提交')
      }else{
        ElMessage.warning('请确认账号和密码')
      }
    })
  }
}

//重置函数
const onReset = () => {

}
</script>

<style lang="scss" scoped>

</style>